import React from 'react';
import { Table, Icon, Tooltip, ConfigProvider } from 'antd';
import styles from './DataUpdate.less';

const DataUpdate = React.forwardRef(({ getSource, tableConfig, tableProps }, ref) => {
    const { dataSource = [], columns = [] } = getSource; // 数据源
    const { modifyType = 'modifyType', difference = 'difference' } = tableConfig; // 可配置modifyType状态字段 对比历史字段difference

    // 这里处理行新增或者删除样式，但删除后端暂时没办法处理，所以这里只处理了新增
    const rowClassName = record => {
        if (record[modifyType] === 1) {
            return styles.add;
        }
        if (record[modifyType] === 3) {
            return styles.delete;
        }
        return '';
    };

    const tableRef = React.useRef();

    const curColumns = columns.map(item => {
        const render = (text, record) => {
            const diffData = JSON.parse(record[difference] || '{}');
            const formatText = item.formatter ? item.formatter(text) : text;
            if (diffData[item.dataIndex] !== undefined) {
                return (
                    <div className={styles.tdWarp}>
                        <div className={styles.changeTd}>
                            <div className={styles.cont}>
                                <span style={{ marginRight: 5 }}>{formatText}</span>
                                <ConfigProvider getPopupContainer={trigger => tableRef.current || trigger}>
                                    <Tooltip
                                        placement="top"
                                        title={`原值为:${
                                            item.formatter
                                                ? item.formatter(diffData[item.dataIndex])
                                                : diffData[item.dataIndex]
                                        }`}
                                    >
                                        <Icon type="info-circle" style={{ color: 'rgba(0,0,0,0.8)' }} />
                                    </Tooltip>
                                </ConfigProvider>
                            </div>
                        </div>
                    </div>
                );
            }
            // 影响范围为空的情况显示无
            if (record.affectPost === '' && item.dataIndex === 'affectPost') {
                return '无';
            }
            return formatText;
        };
        return {
            ...item,
            render
        };
    });

    // 在这里处理children数据
    const getDataSource = dataSource.map(item => {
        const extra = {};
        if (item.referencePostInfo) {
            const extraJSONObj = JSON.parse(item.referencePostInfo);
            const firstKey = curColumns[0].dataIndex;
            const extraData = Array.isArray(extraJSONObj) ? [...extraJSONObj] : [extraJSONObj];
            // 空数组
            if (extraData.length) {
                extra.children = [
                    { [firstKey]: '参考数据', id: `${item.id}-head` },
                    ...extraData.map(extraItem => ({ ...extraItem, id: `${item.id}-${extraItem.id}` }))
                ];
            }
        }
        return {
            ...item,
            ...extra
        };
    });

    // const TableComponent = props => (
    //     <div ref={tableRef} style={{ position: 'relative' }}>
    //         <Table
    //             className={styles.dataUpdateTable}
    //             ref={ref}
    //             columns={curColumns}
    //             pagination={false}
    //             // defaultExpandAllRows

    //             rowClassName={record => rowClassName(record)}
    //             {...props}
    //             {...tableProps}
    //         />
    //     </div>
    // );

    return (
        <div ref={tableRef} style={{ position: 'relative' }}>
            <Table
                className={styles.dataUpdateTable}
                ref={ref}
                columns={curColumns}
                pagination={false}
                // defaultExpandAllRows
                rowClassName={record => rowClassName(record)}
                dataSource={getDataSource}
                {...tableProps}
            />
        </div>
    );
});

DataUpdate.propTypes = {};

export default DataUpdate;
